import { Databasesort_rules, Databasetitle } from '@/api/biomedicalArea'
import { HsAdminProTable } from '@hs-admin/base-components'
import { Button } from 'antd'
import { useEffect, useState } from 'react'

const Demo = () => {
  const [columns, setColumns] = useState<any[]>([])
  const [data, setdata] = useState([])
  const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
    console.log('params', pagination, filters, sorter, extra)
  }
  const release_item_id = '349d78e8-9078-4316-9dd2-e272f88c41a1'
  const [columnsStateMap, setColumnsStateMap]: any = useState({})

  useEffect(() => {
    setColumns([])
    setdata([])

    //获取表头排序
    const Databasesort_ruleslist = async (callBack: any) => {
      const arr: any = []
      const list = await Databasesort_rules({ id: release_item_id, page: 1, page_size: 999 })
      list.items.forEach((item: any) => {
        if (item.type === 'time' || item.type === 'numeric') arr.push(item.config.fields)
      })
      callBack(arr)
    }

    const filters = (List: any[]) => {
      List = List.filter((item) => item.display_type !== 'not_display')
      const arr: any[] = []
      List.forEach((item: any) => {
        if (item.available) {
          const obj: any = {}
          obj.title = item.display_name || item.comment
          obj.dataIndex = item.name
          obj.queryable = item.queryable
          obj.width = 210
          obj.render = (text: any) => {
            text = text && typeof text === 'object' ? JSON.stringify(text) : text
            return <span>{text}</span>
          }
          if (item.sort) {
            obj.sorter = true
            obj.sortDirections = ['descend', 'ascend']
          }
          arr.push(obj)
        }
      })
      return arr
    }

    //获取数据表头
    const Databasetitles = () => {
      Databasesort_ruleslist((res: any) => {
        //二维数组变成一维数组
        const sortlist = res.flat()
        Databasetitle(release_item_id).then((res: any) => {
          res = res.filter((item: { available: any }) => item.available)
          res.sort((a: { queryable: number }, b: { queryable: number }) => b.queryable - a.queryable)
          const obj: any = {
            action: {
              disable: true,
              show: true,
              sorter: true
            }
          }
          res.forEach((item: any, index: any) => {
            obj[item.name] = {
              show: item.queryable ? true : false,
              fixed: !index ? 'left' : false,
              ellipsis: !index ? true : false
            }
          })
          setColumnsStateMap(obj)

          res.forEach((item: any) => {
            sortlist.forEach((_item1: any) => {
              if (item.name === _item1.field) {
                item.sort = true
              }
            })
          })
          setColumns(filters(res))
        })
      })
    }

    Databasetitles()
  }, [])

  return (
    <div>
      demo
      <Button type="primary" onClick={() => {}}>
        click
      </Button>
      <HsAdminProTable
        columns={columns}
        dataSource={data}
        onChange={onChange}
        columnsState={{ value: columnsStateMap, onChange: setColumnsStateMap }}
      />
    </div>
  )
}

export default Demo
